<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/z_zong.css">
	</head>
	<body>
		<div id="z_box">
			<div id="z_header">
				<div id="z_img">
					<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=76701368,4014287046&fm=26&gp=0.jpg">
				</div>
				<ul id="z_ul1">
					<!-- 文字右上移动 -->
					<!-- <p>a<sup>2</sup>+a<sup>3</sup>=a<sub>4</sub></p>
					<p>汉字<sup>上移</sup>，汉字<sub>下移</sub></p> -->
					<li><a href="javascript:;">编辑</a></li>
					<li><a href="javascript:;">待审核 <sup style="color: red; font-weight: bold; line-height: 5px;">6</sup></a></li>
					<li><a href="javascript:;">待发布 <sup style="color: red; font-weight: bold; line-height: 5px;">8</sup></a></li>
					<li><a href="javascript:;">已发布 <sup style="color: red; font-weight: bold; line-height: 5px;">7</sup></a></li>
					<li><a href="javascript:;">专题更新</a></li>
				</ul>
				<div id="z_h_r">
					<div>
						<p>登录用户：<span>Biao</span></p>
						<p>角色：<span>管理员</span></p>
					</div>
					<ul id="z_ul2">
						<li><a href="javascript:;">用户管理</a></li>
						<li><a href="javascript:;">频道管理</a></li>
						<li><a href="javascript:;">系统管理</a></li>
					</ul>
				</div>
				
			</div>
			<div id="z_con1">
				<div style="display: block;">
					<div id="z_left">
						<ul>
							<li>专题管理</li>
							<li>文章管理</li>
							<li>短评管理</li>
						</ul>
					</div>
					<div id="z_right" >
						<div>
							<iframe src="happy_goat_app/w_zhuanti.html" width="100%" height="530px"></iframe>
						</div>
						<div>
							<iframe src="happy_goat_app/l_wenzhang.html" width="100%" height="530px"></iframe>
						</div>
						<div style="display: block;">
							<iframe src="happy_goat_app/d_duanping.html" width="100%" height="530px"></iframe>
						</div>
					</div>
				</div>
				
				
				<div>
					<iframe src="待审核-文章管理/daishenhe.html"  width="100%" height="530px" frameborder="0"></iframe>
				</div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div id="z_con2" style="display: none;">
				<div>
					<!-- 用户管理导航 -->
					<div id="z_left">
						<!-- <div class="box"> -->
							<ul>
								<li onclick="">修改密码</li>
								<li>操作日志</li>
								<li>登录日志</li>
								<li>新增用户</li>
								<li>修改用户</li>
								<li>删除用户</li>
								<li>启动</li>
								<li>禁用</li>
							</ul>
						<!-- </div>	 -->
					</div>
					<div id="z_right">
						<!-- 首页 -->
						<!-- <iframe src="happy_goat_app/c-index.html" width="100%" height="100%"></iframe> -->

						<div><iframe src="happy_goat_app/d_mima.html" width="100%" height="100%"></iframe></div>
						<div><iframe src="happy_goat_app/d_caozuorizhi.html" width="100%" height="100%"></iframe></div>
						<div><iframe src="happy_goat_app/d_denglurizhi.html" width="100%" height="100%"></iframe></div>
						<div><iframe src="happy_goat_app/d_xinzengyonghu.html" width="100%" height="100%"></iframe></div>
						<div><iframe src="happy_goat_app/d_xiugaiyonghu.html" width="100%" height="100%"></iframe></div>
						<div>d_shanchuyonghu</div>
						<div>d_qiyong</div>
						<div>d_jinyong</div>
					</div>
				</div>
				<div style="width: 100%;height: 100%;">
					<iframe  width="100%" height="100%" src="频道管理/主界面/zhu.html" frameborder="0"></iframe>
				</div>
				<div>8</div>
			</div>
		</div>
	</body>
	<script>
	
		var z_con1=document.querySelector('#z_con1');
		var z_con2=document.querySelector('#z_con2');
	
		var z_list1=document.querySelectorAll('#z_ul1>li');
		var z_div1=document.querySelectorAll('#z_con1>div');
			for (var i=0;i<z_list1.length;i++) {
				z_list1[i].index=i;
				z_list1[i].onclick=function(){
					z_con1.style.display= 'block'
					z_con2.style.display= 'none'
					for (var i=0;i<z_list1.length;i++) {
						z_list1[i].className='';
						z_div1[i].style.display='none';
					}
					this.className='active'
					z_div1[this.index].style.display='block';	
				}
				
			}
			
			
		var z_list2=document.querySelectorAll('#z_ul2>li');
		var z_div2=document.querySelectorAll('#z_con2>div');
			for (var i=0;i<z_list2.length;i++) {
				z_list2[i].index=i;
				z_list2[i].onclick=function(){
					z_con1.style.display= 'none'
					z_con2.style.display= 'block'
					for (var i=0;i<z_list2.length;i++) {
						z_list2[i].className='';
						z_div2[i].style.display='none';
					}
					this.className='active'
					z_div2[this.index].style.display='block';	
				}
				
			}
			
			
		var z_list3=document.querySelectorAll('#z_left>ul>li');
		var z_div3=document.querySelectorAll('#z_right>div');
			for (var i=0;i<z_list3.length;i++) {
				z_list3[i].index=i;
				z_list3[i].onclick=function(){
					for (var i=0;i<z_list3.length;i++) {
						z_list3[i].className='';
						z_div3[i].style.display='none';
					}
					this.className='active2'
					z_div3[this.index].style.display='block';	
				}
				
			}

		var oli = document.querySelectorAll("#z_left>.box>li");


	</script>
</html>
